<template>
  <div>
    <van-nav-bar title="邮箱认证"
                 left-text="返回"
                 left-arrow
                 fixed
                 @click-left="onClickLeft" />
    <!-- 头像 -->
    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="user">
      <div class="user-image">
        <img :src="LoginUser.avatar"
             alt="">
      </div>
    </div>
    <van-field v-model="LoginUser.email"
               name="email"
               readonly
               label="邮箱"
               placeholder="请输入邮箱" />
    <van-field v-model="code"
               center
               clearable
               label="验证码"
               placeholder="请输入验证码"
               label-align="right"
               label-width="42px"
               v-if="LoginUser.auth == 0"
               v-show="Email">
      <template #button>
        <van-count-down v-show="Stime"
                        :auto-start="false"
                        millisecond
                        :time="time"
                        format="ss秒"
                        ref="countDown"
                        @finish="onFinish" />
        <van-button size="small"
                    type="primary"
                    color="#7232dd"
                    @click="onEmail"
                    v-show="Btn">
          发送验证码
        </van-button>
      </template>
    </van-field>

    <van-button type="primary"
                :disabled="LoginUser.auth == 1 ? true : false"
                size="normal"
                block
                @click="onCheck">{{LoginUser.auth == 1 ? '已验证' : '验证'}}</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      LoginUser: this.$cookies.get('LoginUser'),
      code: '',
      time: 10 * 1000,
      Stime: false,
      Btn: true,
      Email: true,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/user/base/index')
    },
    async onEmail() {
      this.Btn = false
      this.Stime = true
      //   开始计时
      this.$refs.countDown.start()
      let result = await this.$api.EmailCode({
        userid: this.LoginUser.id,
        email: this.LoginUser.email,
      })
      if (result.code === 1) {
        this.$notify({
          type: 'success',
          message: '发送邮件成功',
          duration: 1500,
        })
        return false
      } else {
        this.$notify({
          type: 'danger',
          message: '发送邮件失败',
          duration: 1500,
        })
        return false
      }
    },
    onFinish() {
      this.Btn = true
      this.Stime = false
      this.$refs.countDown.reset()
    },
    async onCheck() {
      let data = {
        //此处的code为输入框的code
        code: this.code,
        userid: this.LoginUser.id,
      }
      let result = await this.$api.EmailCheck(data)
      if (result.code === 1) {
        this.$notify({
          type: 'success',
          message: '验证成功',
          duration: 1500,
        })
        this.Email = false
        this.$router.go(-1)
        return false
      } else {
        this.$notify({
          type: 'danger',
          message: '验证失败',
          duration: 1500,
        })
        return false
      }
    },
  },
}
</script>
<style>
@import url('/assets/css/profile.css');
.h50 {
  height: 50px;
}
.van-cell-group--inset {
  margin: 0px;
  border-radius: 0px;
  overflow: hidden;
}
.van-field__label {
  width: 40px;
}
</style>